<template>
  <view>
    <view class="user-polist">
      <!-- 导航区域 -->
      <view class="user-postlist-top">
       <view class="top-item" @click="showItemByCart">
         <text>分类</text>
         <uni-icons :type="typestyle1 === false ? 'bottom' : 'top'" size="30"></uni-icons>
       </view> 
       <view class="top-item" @click="showItemBySort">
         <text>排序</text>
         <uni-icons :type="typestyle2 === false ? 'bottom' : 'top'" size="30"></uni-icons>
       </view> 
      </view>
      <!-- 内容区域 -->
      <view class="user-posstlist-cate" v-if="typestyle1 === true">
        <view class="content-left" v-for="(item,index) in indexlistitem1" :key="index" v-if="current === 1">
          <view class="content-left-item">
            {{item}}
          </view>
        </view>
      </view>
      <view class="user-posstlist-sort" v-if="typestyle2 === true">
        <view class="content-right" v-for="(item,index) in indexlistitem2" :key="index">
          <view class="content-right-item">
            {{item}}
          </view>
        </view>
       </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
          indexlistitem1: ['运动','生活','学习'],
          indexlistitem2: ['新发布','热度'],
          typestyle1: false,
          typestyle2: false,
          current: '',
        };
    },
    methods: {
      showItemByCart() {
        this.typestyle1 = !this.typestyle1
        if(this.typestyle2 === true) this.typestyle2 = false
        this.current = 1
      },
      showItemBySort() {
        this.typestyle2 = !this.typestyle2
        if(this.typestyle1 === true) this.typestyle1 = false
        this.current = 2
      }
    }
  }
</script>

<style lang="scss">
  .user-polist {
    .user-postlist-top {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .top-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        text {
          margin: 5px 0px;
        }
      }
    }
    .user-posstlist-cate {
      .content-left {
        .content-left {
          
        }
      }
    }
    .user-posstlist-sort {
      .content-right {
        .content-right-item {
          
        }
      }
      
    }
  }
</style>
